<template>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  

  <!-- <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input v-model.number="ruleForm.age"></el-input>
  </el-form-item> -->


  <el-form-item label="手机号" prop="Phone_Number">
    <el-input type="text" v-model="ruleForm.Phone_Number"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="Password">
    <el-input type="password" v-model="ruleForm.Password" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submit('ruleForm')">提交</el-button>
    <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
  </el-form-item>
</el-form>
</template>


<script>
  
    // import axios from 'axios'
  import { login } from "@/api/user";

  export default{
    data(){
      console.log(1)
      const validatePhone = (rule,value,callback) =>{
        if(!value){
            callback(new Error('请输入手机号'));
        }else{
            callback();
        }
      };
      return{
        ruleForm:{
          Phone_Number:"15577262650",
          Password:"admin123"
        },
        rules:{
          Phone_Number:[
            {validator:validatePhone,trigger:"blur"},
          ],
          Password:[
            {required:true,message:"请输入密码",trigger:"blur"}
          ]
        }
      }
    },
    methods:{
      quit(){
        localStorage.removeItem('token')
      },
      submit(formName){
        console.log(2)
        this.$refs[formName].validate((valid)=>{
          console.log(3)
          if(valid){
            console.log(4)
            login(this.ruleForm).then((res)=>{
              if(res.statusCode == 200){
                this.$message({
                  message:"登录成功",
                  type:"success",
                });

                localStorage.setItem("token",res.token);
                localStorage.setItem("user",JSON.stringify(res.userInfo[0]));
                this.$router.push("/");

              }else{
                this.$message({
                  message:res.error,
                  type:"error",
                });
              }
            });
          }
        });
        
      }
    }

  }






    // export default{
    //     data() {
    //   var checkAge = (rule, value, callback) => {
    //     if (!value) {
    //       return callback(new Error('年龄不能为空'));
    //     }
    //     setTimeout(() => {
    //       if (!Number.isInteger(value)) {
    //         callback(new Error('请输入数字值'));
    //       } else {
    //         if (value < 18) {
    //           callback(new Error('必须年满18岁'));
    //         } else {
    //           callback();
    //         }
    //       }
    //     }, 1000);
    //   };
      // var validatePass = (rule, value, callback) => {
      //   if (value === '') {
      //     callback(new Error('请输入密码'));
      //   } else {
      //     callback();
      //   }
      // };
      // var validatePhone = (rule,value,callback) =>{
      //   if(!value){
      //       callback(new Error('请输入手机号'));
      //   }else{
      //       callback();
      //   }
      // };

    //   return{
    //     ruleForm:{
    //       Phone_Number:"15577262650",
    //       Password:"admin123"
    //     },
    //     rules:{
    //       Phone_Number:[
    //         {validator:validatePhone,trigger:"blur"},
    //       ],
    //       Password:[
    //         {required:true,message:"请输入密码",trigger:"blur"}
    //       ]
    //     }
    //   }
      

    // //   var validatePass2 = (rule, value, callback) => {
    // //     if (value === '') {
    // //       callback(new Error('请再次输入密码'));
    // //     } else if (value !== this.ruleForm.pass) {
    // //       callback(new Error('两次输入密码不一致!'));
    // //     } else {
    // //       callback();
    // //     }
    // //   };
    // //   return {
    // //     ruleForm: {
    // //       pass: '',
    // //       checkPass: '',
    // //       age: '',
    // //       phone:''
    // //     },
    // //     rules: {
    // //       pass: [
    // //         { validator: validatePass, trigger: 'blur' },
    // //         {min:6,max:15,message:"长度在6-15个字符",trigger:'blur'}
    // //       ],
    // //       phone:[
    // //         {validator:validatePhone,trigger:'blur'},
    // //         {min:10,max:12,message:"手机长度不正确",trigger:'blur'}
    // //       ]
    // //     }
    // //   };
    // // },
    // // methods: {
    // //   submitForm(formName) {
    // //     this.$refs[formName].validate((valid) => {
    // //       if (valid) {
    // //         alert('submit!');
    // //       } else {
    // //         console.log('error submit!!');
    // //         return false;
    // //       }
    // //     });
    // //   },
    // //   resetForm(formName) {
    // //     this.$refs[formName].resetFields();
    // //   }

    // },
    // methods:{
    //   quit(){
    //     localStorage.removeItem('token')
    //   },
    //   submit(formName){
    //     this.$refs[formName].validate((valid)=>{
    //       if(valid){
    //         login(this.ruleForm).then((res)=>{
    //           if(res.statusCode == 200){
    //             this.$message({
    //               message:"登录成功",
    //               type:"success",
    //             });

    //             localStorage.setItem("token",res.token);
    //             localStorage.setItem("user",JSON.stringify(res.userInfo[0]));
    //             this.$router.push("/");

    //           }else{
    //             this.$message({
    //               message:res.error,
    //               type:"error",
    //             });
    //           }
    //         });
    //       }
    //     });
        
    //   }
    // }
//  }

</script>